import React from 'react';
import {connect} from 'react-redux';

import {
  Text,
  TextInput,
  View,
  ScrollView,
  Image,
  InteractionManager,
  TouchableOpacity,
  Dimensions
} from 'react-native';

import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import StepInfo from '../product/stepInfo';
import theme from '../../config/theme';
import {naviPush} from '../../navigatorApp/actions';
import NetUtil from '../../common/NetUtil';
import config from '../../config/config';
import ActionSheet from 'react-native-actionsheet';
import {getQiniuToken} from '../../utils/commonHttp';
import {changeAuthInfo} from '../shop/actions';
import {chooseImage, toast} from '../../utils/NativeUtil';

class IdentityCard extends React.Component {

    constructor(props) {
        super(props);
        this.imgType = 0;
        this.smsCode = props.navigation.state.params.smsCode;
    }

    static navigationOptions = ({navigation, screenProps}) => {
        let header = (<CLNavigatorHeader navigation={navigation} title="店铺认证"/>);
        return {header}
    };

    takePhoto = (type) => {
        this.imgType = type;
        this.ActionSheet.show()
    }

    handlePress = (i) => {
        if (i == 1) {
            this.chooseImg('takephoto');
        } else if (i == 2) {
            this.chooseImg('choose');
        }
    }

    chooseImg = (type) => {
        var self = this;
        getQiniuToken(function (res) {
            let qntoken = res.token;

            let params = {
                type: type,
                size_w: 866,
                size_h: 539,
                token: qntoken,
                filetag: 'shop'
            };

            chooseImage(params, function(res) {
                switch (self.imgType) {
                    case 1: {
                        self.props.changeAuthInfo({cardFront: config.qiniuUrl + res.imgs});
                        break;
                    }
                    case 2: {
                        self.props.changeAuthInfo({cardBackground: config.qiniuUrl + res.imgs});
                        break;
                    }
                    case 3: {
                        self.props.changeAuthInfo({cardWithOwner: config.qiniuUrl + res.imgs});
                        break;
                    }
                    default: {
                        break;
                    }
                }
            });

        }, function (message) {
            alert(message);
        })
    }

    gotoNext = () => {
        if (this.props.cardFront == '' || this.props.cardFront == undefined) {
            toast('请上传身份证正面照');
            return;
        }
        if (this.props.cardBackground == '' || this.props.cardBackground == undefined) {
            toast('请上传身份证背面照');
            return;
        }
        if (this.props.cardWithOwner == '' || this.props.cardWithOwner == undefined) {
            toast('请上传手持身份证照');
            return;
        }

        var self = this;
        let url = '/s/shop_certification/save';
    
        const params = {
            token: self.props.token,
            cardFront: self.props.cardFront,
            cardBackground: self.props.cardBackground,
            cardWithOwner: self.props.cardWithOwner,
            smsCode: self.smsCode
        };

        NetUtil.postSign(config.apiUrl + url, params, function (res) {
            if (res.success) {
                self.props.naviPush('businessLicense', {smsCode: self.smsCode});
            } else {
            }
        });
    }

  render() {
    let {width, height} = Dimensions.get('window');
    let source1 = undefined;
    let source2 = undefined;
    let source3 = undefined;
    if (this.props.cardFront == '' || this.props.cardFront == undefined) {
        source1 = require('../../image/img_identityCard_z.png');
    } else {
        source1 = {uri: this.props.cardFront};
    }
    if (this.props.cardBackground == '' || this.props.cardBackground == undefined) {
        source2 = require('../../image/img_identityCard_f.png');
    } else {
        source2 = {uri: this.props.cardBackground};
    }
    if (this.props.cardWithOwner == '' || this.props.cardWithOwner == undefined) {
        source3 = require('../../image/img_identityCard_take.png');
    } else {
        source3 = {uri: this.props.cardWithOwner};
    }
    return (
        <View style={{flex: 1, backgroundColor: 'white', flexDirection: 'column', paddingLeft: 15, paddingRight: 15}}>
    <ScrollView showsVerticalScrollIndicator={false}>
      <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10, marginBottom: 5}}>
        <Image style={{width: 20, height: 20, marginRight: 10}} source={require('../../image/img_shopAuth_info.png')}/>
        <Text>请填写您的真实信息，一经通过将无法修改</Text>
      </View>
      <StepInfo step={2} index={1}/>
      <View style={{marginTop: 20, alignItems: 'center'}}>
        <Text style={{fontSize: 18}}>身份证正面</Text>
        <TouchableOpacity onPress={() => {
            this.takePhoto(1);
        }}>
            <Image style={{marginTop: 10, width: width - 40, height: (width - 40) / 866 * 539}} source={source1}/>
        </TouchableOpacity>
      </View>
      <View style={{marginTop: 20, alignItems: 'center'}}>
        <Text style={{fontSize: 18}}>身份证背面</Text>
        <TouchableOpacity onPress={() => {
            this.takePhoto(2);
        }}>
            <Image style={{marginTop: 10, width: width - 40, height: (width - 40) / 866 * 539}} source={source2}/>
        </TouchableOpacity>
      </View>
      <View style={{marginTop: 20, alignItems: 'center'}}>
        <Text style={{fontSize: 18}}>手持身份证照</Text>
        <TouchableOpacity onPress={() => {
            this.takePhoto(3);
        }}>
            <Image style={{marginTop: 10, width: width - 40, height: (width - 40) / 866 * 539}} source={source3}/>
        </TouchableOpacity>
      </View>
      <TouchableOpacity onPress={() => {
        this.gotoNext();
      }}>
        <View style={{height: 40, marginTop: 30, marginLeft: 30, marginRight: 30, marginBottom: 10, backgroundColor: theme.maincolor, borderRadius: 5, alignItems: 'center', justifyContent: 'center'}}>
          <Text style={{color: 'white', fontSize: 18}}>下一步</Text>
        </View>
      </TouchableOpacity>
      <ActionSheet
        ref={o => this.ActionSheet = o}
        title='选择图片'
        cancelButtonIndex={0}
        destructiveButtonIndex={1}
        options={['取消', '拍照', '相册选取']}
        onPress={this.handlePress}
      />
    </ScrollView>
    </View>
    )
  }
}


const mapStateToProps = state => ({
    token: state.mainmodel.token,
    cardFront: state.shop.cardFront,
    cardBackground: state.shop.cardBackground,
    cardWithOwner: state.shop.cardWithOwner
});

const mapDispatchToProps = dispatch => ({
  naviPush:(routerName, params) => {
    dispatch(naviPush(routerName, params))
  },
  changeAuthInfo: (changedInfo) => {
    dispatch(changeAuthInfo(changedInfo))
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(IdentityCard);
